// import CodeEditor from '@/components/CodeEditor';
import ReactJsonView from '@/components/ReactJsonView';
import ContentCard from '@/page-components/ContentCard';
import EditForm from '@/page-components/EditForm';
import { useLocation } from '@umijs/max';
import { Button, Form, Input } from 'antd';
import { useEffect, useRef, useState } from 'react';
import TextModal from './TestModal';
import TestTable from './TestTable';
const Index = () => {
  const [form] = Form.useForm();
  const modalRef = useRef<any>();
  // const codeEditorRef = useRef<any>();
  // const [code, setCode] = useState<any>('');
  const [orignCode, setOrignCode] = useState<any>({});
  const location = useLocation();
  // const option = Form.useWatch('option', form);
  // useEffect(() => {
  //   form.setFieldsValue({
  //     option: '1',
  //   });
  // }, []);
  const onSubmit = (values: any) => {
    console.log(values);

    // setCode(`${JSON.stringify(values, null, 2)}`);
    setOrignCode(values);
  };
  useEffect(() => {
    // console.log(codeEditorRef.current);
    // console.log(codeEditorRef.current.getCode());
    const searchParams = new URLSearchParams(location?.search);
    console.log(location?.search, searchParams?.entries());
  }, []);
  return (
    <div>
      <ContentCard>
        {/* <EditForm form={form}>
          <Form.Item
            label="选项"
            name="option"
            rules={[{ required: true, message: '请选择' }]}
          >
            <Select
              placeholder="请选择"
              options={[
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="选项"
            name="option"
            rules={[{ required: true, message: '请选择' }]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="选项11111111111"
            name="option"
            rules={[{ required: true, message: '请选择' }]}
          >
            <Select
              placeholder="请选择"
              options={[
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
              ]}
            />
          </Form.Item>
          <Form.Item
            label="选项"
            name="option"
            rules={[{ required: true, message: '请选择' }]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </EditForm> */}
        {/* <CodeEditor codeRef={codeEditorRef} value={code} /> */}
        <ReactJsonView src={orignCode}></ReactJsonView>
        <TestTable></TestTable>
        <TextModal ref={modalRef} onSubmit={onSubmit}></TextModal>
        <Button
          onClick={async () => {
            modalRef?.current?.show();
          }}
        >
          打开表单
        </Button>
      </ContentCard>
      <ContentCard title="编辑表单" style={{ marginTop: '20px' }}>
        <EditForm form={form}>
          <Form.Item label="用户名" name="username">
            <Input placeholder="请输入" style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item label="年龄" name="age">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="用2323232323户名" name="username">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="用2323232323户名" name="username">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="用2323232323户名" name="username">
            <Input placeholder="请输入" />
          </Form.Item>
        </EditForm>
      </ContentCard>
    </div>
  );
};
export default Index;
